<template>
  <a-modal v-model:visible="visible" :title="modalTitle" width="35%" @ok="handleOk" @cancel="handleCancel">
    <a-form :model="formState" ref="formRef" :label-col="{ span: 5 }">
      <a-form-item label="店铺名称" name="shop_name" :rules="[{ required: true, message: '请输入店铺名称' }]">
        <a-input v-model:value="formState.shop_name" placeholder="请输入店铺名称" />
      </a-form-item>
      <a-form-item label="店铺logo" name="shop_logo" :rules="[{ required: true, message: '请输入店铺名称' }]">
        <a-form-item-rest>
          <app-upload :fileList="formState.shop_logo" :min="1" @upload-img="uploadImg" />
        </a-form-item-rest>
      </a-form-item>
      <a-form-item label="店铺电话" name="shop_mobile" :rules="[{ required: true, message: '请输入店铺名称' }]">
        <a-input-number style="width:280px" v-model:value="formState.shop_mobile" placeholder="请输入店铺电话" />
      </a-form-item>
      <a-form-item label="地址" name="area" :rules="[{ required: true, message: '请选择' }]">
        <a-cascader v-model:value="formState.area" :options="treeData" :field-names="{
          children: 'child',
          label: 'name',
          value: 'city_id',
        }" placeholder="请选择" />
      </a-form-item>
      <a-form-item label="店铺详细地址" name="shop_detail" :rules="[{ required: true, message: '请输入店铺名称' }]">
        <a-textarea v-model:value="formState.shop_detail" placeholder="请输入店铺详细地址" />
      </a-form-item>
      <a-form-item label="店铺介绍" name="shop_content" :rules="[{ required: true, message: '请输入店铺名称' }]">
        <a-textarea v-model:value="formState.shop_content" placeholder="请输入店铺介绍" />
      </a-form-item>
      <a-form-item label="用户" name="user_id" :rules="[{ required: true, message: '请选择用户' }]">
        <a-select v-model:value="formState.user_id" show-search
          :getPopupContainer="(triggerNode) => triggerNode.parentNode" placeholder="请选择用户" allowClear
          :filterOption="filterOption">
          <a-select-option v-for="(item, index) in state.options" :value="item.user_id" :label="item.nickname"
            :key="index" :disabled="item.is_contact == 1">{{ item.nickname }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="经度" name="longitude">
        <a-input-number v-model:value="formState.longitude" placeholder="请输入经度" style="width:280px" />
      </a-form-item>
      <a-form-item label="维度" name="latitude">
        <a-input-number v-model:value="formState.latitude" placeholder="请输入维度" style="width:280px" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import useModal from "@/utils/useModal";
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";
import { add, edit, info } from "@/api/shop";
import { list } from "@/api/user";
import { cityTreeList } from "@/api/home";

const { visible, modalTitle } = useModal();

const emits = defineEmits(["model-success"]);
const formRef = ref();
const treeData = ref([])

const formState = reactive({
  shop_name: "",
  user_id: null,
  shop_logo: [],
  shop_mobile: "",
  shop_detail: "",
  shop_content: "",
  area: [],
  province_id: null,
  city_id: null,
  area_id: null,
  longitude: "",
  latitude: ""
});
const state = reactive({
  options: [],
});
const show = (model) => {
  modalTitle.value = model ? "编辑店铺" : "新增店铺";
  getUserAllList();
  getCityTreeList()
  if (model && model.shop_id) {
    getDetails(model.shop_id);
  } else {
    resetForm({
      shop_id: null
    })
  }
  visible.value = true;
};
// 用户列表
const getUserAllList = () => {
  list().then((res) => {
    if (res.code == 0) {
      const data = res.data;
      state.options = data.data;
    }
  });
};
// 获取详情
const getDetails = (id) => {
  info({
    id: id,
  }).then((res) => {
    if (res.code === 0) {
      const data = res.data;
      resetForm(data);
      formState.shop_logo = formState.shop_logo
        ? [
          {
            url: formState.shop_logo,
          },
        ]
        : [];
      formState.area = [
        formState.province_id,
        formState.city_id,
        formState.area_id,
      ];
    }
  });
};
// 获取城市列表
const getCityTreeList = () => {
  cityTreeList().then((res) => {
    if (res.code === 0) treeData.value = res.data || [];
  });
};
const uploadImg = (val) => {
  formState.shop_logo = formState.shop_logo.concat(val);
}
//下拉框搜索
const filterOption = (input, option) => {
  //select有label这个字段
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
//设置表单的值
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
// 保存
const handleOk = async () => {
  await formRef.value.validate().then(() => {
    const params = {
      ...formState,
      shop_logo: formState.shop_logo.length > 0 ? formState.shop_logo[0]?.url : "",
      province_id: formState.area.length > 0 ? formState.area[0] : "",
      city_id: formState.area.length > 1 ? formState.area[1] : "",
      area_id: formState.area.length > 2 ? formState.area[2] : "",
    };
    delete params.area
    if (formState.shop_id) {
      edit({
        id: formState.shop_id,
        ...params,
      }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    } else {
      //添加
      add({ ...params }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    }
  });
};
const handleCancel = () => {
  formRef.value.resetFields();
};

defineExpose({
  show,
});
</script>